<template>
  <!--  // 搜索结果展示视图-->
  <!--  /*-->
  <!--  通过首页获取到搜索关键字，并把关键字通过路由传值带到searchView（搜索主视图），在主视图保存关键字，具有全局性，可供后续视频搜索和文章搜索-->
  <!--  关键字可通过路由到searchVideoView以及searchArticleView的同时传递过去，在分类下的视图发起网路请求-->

  <!--  不同类型（视频or文章）的搜索结果展示方案：-->
  <!--  1-按类别通过路由到不同的视图进行展示（首先想到）-->
  <!--  2-使用动态路由-->
  <!--  */-->
  <div id="ul_container">
    <!--
      default-active：对当前URL进行解码后作为默认激活选项
     -->
    <el-menu
      id="el-menu"
      class="el-menu-demo"
      mode="horizontal"
      :ellipsis="false"
      :router="true"
      :default-active="decodeURIComponent(route.fullPath)"
    >
      <el-menu-item :index="'/search/video?keyword=' + keyWord">视频</el-menu-item>
      <el-menu-item :index="'/search/article?keyword=' + keyWord">专栏</el-menu-item>
    </el-menu>
  </div>
  <!-- 使用作用域插槽，大概是通过路由将VNode插进来 -->
  <!--:key="modules.fullPath" 识别当前页面路由的完整地址，当地址发生改变 (包括参数改变)则重新渲染页面 (例如动态路由参数的变化) -->
  <router-view v-slot="{ Component }" :key="route.fullPath">
    <keep-alive>
      <component :is="Component" />
    </keep-alive>
  </router-view>
</template>

<script lang="ts">
import {defineComponent} from "vue";
import {useRoute} from "vue-router";
// import
export default defineComponent({
  name: "SearchView",
  components: {
    // VideoContainer,
  },
  setup() {
    // 获取当前路由对象
    const route = useRoute();
    // 接收首页路由传递过来的搜索关键字
    const keyWord = route.query.keyword;
    // 对当前URL进行解码
    // console.log(activeIndex);
    // 获取当前需要展示的数据类型（有video和article）
    const type = route.params;
    console.log("=========", type.type);

    return {
      keyWord,
      // type,
      route,
    };
  },
});
</script>

<style scoped>
/* 菜单选择栏样式 */
#ul_container {
  /* margin-top: 10px; */
  /* width: 100%; */
  /* text-align: center; */
  padding-left: 100px;
  border-bottom: 1px solid #e5e7ec;
}

#el-menu {
  display: block;
  width: 100%;
  margin: 0 auto;
  border-bottom: none;
}

a {
  text-decoration: none;
}
</style>
